<template>
  <div id="book_main">
    <div class="clearfix book_list"  >
      <div class="book_list_left">
        <div class="user-info">
          <img :src="bookDetail.user.thumb"  alt="">
          <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">{{bookDetail.user.name}}</div>
        </div>
      </div>
      <div class="book_list_right">
        <div class="title clearfix">
          {{bookDetail.title}}
        </div>

        <div class="content">

          <div class="time">
            <div class="title-box">
              <i style="color: #F6697A" class="ion-clock"></i>
              <span>{{bookDetail.add_time}}</span>
            </div>
            <div id="jsLeftBtn" class="collect">
              收藏
            </div>
          </div>

          <div class="content_image">

            <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;" class="book-list-item-content"></div>
            <div id="book-list" v-html="bookDetail.book_list">

               <!--<img  data-role="lightbox"#}-->
                       <!--data-source="{% static 'images/bg25.jpg' %}"-->
                       <!--src="{% static 'images/bg25.jpg' %}"-->
                       <!--data-group="group-33"-->
                       <!--data-id="1 - 1"-->
                        <!--data-caption="littleSea">-->
            </div>
                      <a-player autoplay :music="{
            title: 'Preparation',
            author: 'Hans Zimmer/Richard Harvey',
            url: 'http://oozwhi2sn.bkt.clouddn.com/9ea31c212a4111e7a143d07e35f0387b',
            pic: 'http://devtest.qiniudn.com/Preparation.jpg',
            lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
          }"></a-player>
          </div>



          <div class="hide_thing">
            <p  style="cursor: pointer">回复获取隐藏东西</p>
          </div>

          <div class="hide_thing">
            asdsadsadsadsadsa
          </div>

        </div>
      </div>
    </div>

    <commentItem></commentItem>

  </div>
</template>

<script>
  import commentItem from '../../components/book/commentItem'
  import Mock from 'mockjs';
  import VueAplayer from 'vue-aplayer';

  const ERROR = 0;
    export default {
      data() {
        return {
          bookDetail: {},
        }
      },
      created() {
        this.$http.get('http://rapapi.org/mockjs/17725/api/book/detail/?accessToken=sss').then((response) => {
          response = response.body;
          if (Mock.mock(response).errno === ERROR) {
            this.bookDetail = Mock.mock(response).data;
            console.log(this.bookDetail);
          }
        });
      },
      components: {
        commentItem,
        'a-player': VueAplayer
      },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .book_list{
    width:1158px;
    margin: 4px auto;
    border: 1px solid rgba(255,255,255,0.82);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #1b2433;
    overflow: hidden;
    margin-bottom: 0;
    .book_list_left{
      float: left;
      background-color: #1b2433;
      border-top-left-radius: 10px;
      width: 258px;

      div{
        width: 150px;
        height: 150px;
        margin: 20px auto;
      }
      img{
        width: 100%;
        height: 100%;
        border-radius: 150px;
      }
    }

    .book_list_right{
      width: 898px;
      float: right;
      overflow: hidden;
      background-color: #edf2f6;

      .title{
        width: 100%;
        height: 80px;
        overflow: hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
        padding-left: 50px;
        color: gray;
        background-color: white;

        font-size: 20px;
        font-weight: bold;
        line-height: 80px;

      }

      .content{
        margin-top: 10px;
        width: 95%;
        background-color: white;
        float: right;
        padding-left: 1%;
        overflow: hidden;
        .time{
          width: 100%;
          height: 50px;
          background-color: white;
          margin-bottom: 5px;
          line-height: 50px;
          .title-box{
            float: left;
            height: 50px;
            width: 770px;
          }
          .collect{
            width: 70px;
            height: 40px;
            float: left;
            text-align: center;
            background-color: #B5B5B5;
            border-radius: 10px;
            margin-top: 10px;
            line-height: 40px;
            cursor: pointer;
          }
        }

        .content_image{


          width: 98%;
        }
        #book-list{
          img{
            max-width: 844px;
            max-height: 600px;
            cursor: pointer;
            margin-bottom: 5px;
          }
        }


        .hide_thing{
          border: 1px dashed black;
          width: 98%;
          height: 80px;
          line-height: 80px;
          text-align: center;
          margin-top: 20px;
          margin-bottom: 20px;

        }
      }
    }
  }

  .book_list_mask{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,0.8);
    z-index:200;
    left: 0;
    top: 0;

    .commit_add{
      border: 3px solid #b1aeae;
      margin-top: 150px;
      padding: 10px;
    }
    .commit_add_button{
      margin-top: 20px;
    }
  }
</style>
